<template>
	<view class="promotionCenter">

		<view class="promotionUser">
			<view class=" flex-between">
				<view class="flex-start-center">
					<!-- <view class="margin-right_16rpx">
						<image class="headimg" src="../static/img/face.jpg" mode=""></image>
					</view> -->
					<view class="">
						<view class="font-weight_bold flex-start-center">
							<view class=" ">
								{{promoterGetInfo.name}}
							</view>
							<image class="icon margin-left_10rpx" src="../../static/微信图片_20240824170444.png"
								mode="heightFix"></image>
						</view>
						<view class="" style="color: #999999;margin-top: 10rpx;">
							<text>上级:{{promoterGetInfo.pName}}</text>
						</view>
					</view>

				</view>
				<view class="withdrawalBtn flex" @click="withdrawal()">
					<text>提现</text>
				</view>
			</view>
			<view class="flex-between dataDetails " style="margin-top: 70rpx;">
				<view class="flex-column" v-for="(item,i) in dataDetails" :key="i">
					<view class="margin-bottom_10rpx" style="color:rgb(102, 102, 102);font-size: 28rpx;">
						{{item.text}}
					</view>
					<view class="font-weight_bold" style="color: rgb(51, 51, 51);font-size: 28rpx;">
						{{totelName(item.number)}}
					</view>

				</view>

			</view>

		</view>
		<view class="myOrderCard">

			<view class="flex-between" style="">
				<block v-for="(item, i) in menuNavigationList" :key="i">
					<view class="flex-column " @click="checkOrderFn(item)">
						<image class="avaterIcon" :src="item.img" mode=""></image>
						<view class="rightContent">
							<text class="authorizationTitle">{{ item.text }}</text>
						</view>
					</view>

				</block>
			</view>


		</view>

		<view class="PerformanceStatistics">
			<view class="flex-between padding-bottom_20rpx">
				<view class="flex-align-center ">
					<view class=" line">

					</view>
					<view class="font-weight_bold  border-bottom-f7f7f7">
						业绩统计
					</view>
				</view>
				<!-- <view class="">
					<picker mode="date" :value="date" :fields="currentTimeFn(currentTime)" :start="startDate"
						:end="endDate" @change="bindDateChange">
						<view class="flex-align-center-justify-start  color6">
							<view class="">
								{{ yeartime }}
								<text>-</text>
								{{ monthtime }}
								<text>-</text>
								{{ daytime }}
								<uni-icons type="right" color='#333' size="16"></uni-icons>
							</view>


						</view>

					</picker>
				</view> -->

			</view>
			<view class="flex-start-center margin-top_20rpx">
				<view class="">
					<image class="statisticsImg" src="../../static/组合 1877.png" mode=""></image>
				</view>
				<view class="flex-between dataDetails " style="width: 100%;margin-left: 40rpx;">
					<view class="flex-column" v-for="(item,i) in dataStatistics" :key="i">
						<view class="margin-bottom_10rpx" style="color:#666666;font-size: 28rpx;">
							{{item.text}}
						</view>
						<view class="font-weight_bold" style="color: rgb(51, 51, 51);font-size: 28rpx;color: red;">
							{{totelName(item.number)}}
						</view>

					</view>

				</view>


			</view>
			<view class="flex-start-center margin-top_20rpx">
				<view class="">
					<image class="statisticsImg" src="../../static/组合 1876.png" mode=""></image>
				</view>
				<view class="flex-between dataDetails " style="width: 100%;margin-left: 40rpx;">
					<view class="flex-column" v-for="(item,i) in orderStatistics" :key="i">
						<view class="margin-bottom_10rpx" style="color:#666666;font-size: 28rpx;">
							{{item.text}}
						</view>
						<view class="font-weight_bold" style="color: rgb(51, 51, 51);font-size: 28rpx;">
							{{totelName(item.number)}}
						</view>

					</view>

				</view>

			</view>


		</view>

		<view class="withdrawalOverview">
			<view class="flex-between padding-bottom_20rpx">
				<view class="flex-align-center ">
					<view class=" line">

					</view>
					<view class="font-weight_bold  border-bottom-f7f7f7">
						提现概览
					</view>
				</view>
			<!-- 	<view class="">
					<picker mode="date" :value="date1" :fields="currentTimeFn(currentTime)" :start="startDate1"
						:end="endDate1" @change="bindDateChange1">
						<view class="flex-align-center-justify-start  color6">
							<view class="">
								{{ yeartime1 }}
								<text>-</text>
								{{ monthtime1 }}
								<text>-</text>
								{{ daytime1 }}
								<uni-icons type="right" color='#333' size="16"></uni-icons>
							</view>


						</view>

					</picker>
				</view> -->
			</view>
			<view class="flex-between margin-top_40rpx">
				<view class="flex-columns" v-for="(item,i) in withdrawalOverviewList" :key="i">
					<view class="margin-bottom_10rpx" style="color:#666666;font-size: 28rpx;">
						{{item.text}}
					</view>
					<view class="font-weight_bold" style="color: rgb(51, 51, 51);font-size: 28rpx;">
						{{totelName(item.number)}}
					</view>

				</view>
			</view>

		</view>

		<view class="withdrawalOverview" @click="useListFn()">
			<view class="flex-between padding-bottom_20rpx">
				<view class="flex-align-center ">
					<view class="line">

					</view>
					<view class="font-weight_bold  border-bottom-f7f7f7">
						名下用户
					</view>
				</view>
			<!-- 	<view class="">
					<picker mode="date" :value="date2" :fields="currentTimeFn(currentTime)" :start="startDate2"
						:end="endDate2" @change="bindDateChange2">
						<view class="flex-align-center-justify-start  color6">
							<view class="">
								{{ yeartime2 }}
								<text>-</text>
								{{ monthtime2 }}
								<text>-</text>
								{{ daytime2 }}
								<uni-icons type="right" color='#333' size="16"></uni-icons>
							</view>


						</view>

					</picker>
				</view> -->
			</view>
			<view class="flex-between margin-top_40rpx">
				<view class="flex-columns" v-for="(item,i) in userList" :key="i">
					<view class="margin-bottom_10rpx" style="color:#666666;font-size: 28rpx;">
						{{item.text}}
					</view>
					<view class="font-weight_bold" style="color: rgb(51, 51, 51);font-size: 28rpx;">
						{{totelName(item.number)}}
					</view>

				</view>
			</view>

		</view>
		<sunui-popup ref="phoneLogin">
			<template v-slot:content>

				<view class="padding20" style="background-color: #FFFFFF;">
					<view class="text-align_center margin-top_20rpx font-weight_bold">
						修改密码
					</view>
					<view>


						<view class="margin_10rpx_0 font-weight_bold">
							修改密码
						</view>
						<view class="">
							<text>当前账号密码为：<text style="color: red;">{{promoterGetInfo.password}}</text></text>
						</view>

						<view class="getPhone flex  margin-top_30rpx">

							<input v-model="form.password" maxlength="11" name="phone" placeholder="请重新输入新的密码" />


						</view>



					</view>

					<view class="phoneBtn flex" @click="closeBtn()">
						确定修改
					</view>
				</view>

			</template>
		</sunui-popup>

	</view>

</template>

<script>
	export default {
		components: {

		},
		data() {

			const currentDate = this.getDate({
				format: true
			});
			return {
				form: {
					password: ''
				},
				promoterGetInfo: {},
				date: null,
				date1: null,
				date2: null,
				yeartime: currentDate.split('-')[0],
				//选择的月份
				monthtime: currentDate.split('-')[1],
				//选择的天数
				daytime: currentDate.split('-')[2],
				yeartime1: currentDate.split('-')[0],
				//选择的月份
				monthtime1: currentDate.split('-')[1],
				//选择的天数
				daytime2: currentDate.split('-')[2],
				yeartime2: currentDate.split('-')[0],
				//选择的月份
				monthtime2: currentDate.split('-')[1],
				//选择的天数
				daytime1: currentDate.split('-')[2],
				currentTime: '1',
				currency_name: uni.getStorageSync("system").currency_name,
				userInfo: uni.getStorageSync("userInfo"),

				loginInfo: uni.getStorageSync("loginInfo"),
				withdrawalOverviewList: [{
						number: 0.00,
						text: '已提现(元)'
					},

					{
						number:  0.00,
						text: '提现中(元)'
					},
				],
				userList: [{
						number: 0,
						text: '累计用户'
					},
					{
						number: 0,
						text: '本月新增'
					},
					{
						number: 0,
						text: '今日新增'
					},
				],
				dataDetails: [{
						number: 0.00,
						text: '累计收益(' + uni.getStorageSync("system").currency_name + ')'
					},
					{
						number:0.00,
						text: '总用户'
					},
					{
						number: 0,
						text: '可提现(' + uni.getStorageSync("system").currency_name + ')'
					},

				],
				dataStatistics: [{
						number: 0.00,
						text: '本月收益'
					},
					{
						number: 0.00,
						text: '今日收益'
					},
					{
						number: 0,
						text: '昨日收益'
					},

				],
				orderStatistics: [{
						number: 0.00,
						text: '搭子订单'
					},
					{
						number: 0.00,
						text: '服务订单'
					},
					{
						number: 0,
						text: '社群订单'
					},

				],
				menuNavigationList: [{
						img: '../../static/蒙版-4.png',
						text: '业绩记录',
						url: '/pagesB/index/performanceTracking',
						index: 2
					},
					{
						img: '../../static/蒙版-3.png',
						text: '提现记录',
						index: 5,
						url: '/pagesA/personalCenter/distributionRecords'
					},
					{
						img: '../../static/蒙版-5.png',
						text: '修改密码',
						index: 1,
						url: '/pagesA/personalCenter/joinedGroup'
					},
					{
						img: '../../static/蒙版-2.png',
						text: '推广海报',
						index: 3,
						url: '/pagesB/index/promotionPoster'
					},




				],


			}
		},
		
		computed: {
			totelName: function() {
				return function(num) {

					if (num >= 10000) {
						let remainder = num % 10000;
						let quotient = Math.floor(num / 10000);
						let decimal = Math.floor(remainder / 1000);
						return quotient + '.' + decimal + '万';
					} else {
						return num.toString();
					}
				};
			},
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			},

			currentTimeFn() {
				return function(currentIndex) {
					if (currentIndex == '1') {
						// 日
						return 'day';

					} else if (currentIndex == '2') {
						// 月
						return 'month';
					} else if (currentIndex == '3') {
						// 年
						return 'year';
					}
				};
			},
			startDate1() {
				return this.getDate('start');
			},
			endDate1() {
				return this.getDate('end');
			},

			currentTimeFn1() {
				return function(currentIndex) {
					if (currentIndex == '1') {
						// 日
						return 'day';

					} else if (currentIndex == '2') {
						// 月
						return 'month';
					} else if (currentIndex == '3') {
						// 年
						return 'year';
					}
				};
			},
			startDate2() {
				return this.getDate('start');
			},
			endDate2() {
				return this.getDate('end');
			},

			currentTimeFn2() {
				return function(currentIndex) {
					if (currentIndex == '1') {
						// 日
						return 'day';

					} else if (currentIndex == '2') {
						// 月
						return 'month';
					} else if (currentIndex == '3') {
						// 年
						return 'year';
					}
				};
			},

		},
		onLoad() {
			this.promoterGetInfoFn()
			this.$at.releaseKey('submit');
		},
		methods: {
			useListFn() {
				this.$sun.navGo('/pagesB/index/partnersUserList')
			},
           withdrawal() {
           	this.$sun.navGo('/pagesB/index/applyWithdrawalPromoters')
           },
			async promoterGetInfoFn() {
				const result = await this.$http.post({
					url: this.$api.promoterGetInfo,
					data: {
						id: uni.getStorageSync("loginInfo").id



					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})

				if (result.code == 0) {
					console.log('data', result.data);
					this.promoterGetInfo = result.data
					wx.setStorageSync('promoterGetInfo', this.promoterGetInfo);

					this.dataDetails.forEach((item) => {
						switch (item.text) {
							case '累计收益(' + uni.getStorageSync("system").currency_name + ')':
								item.number = result.data.totayIncome;
								break;
							case '总用户':
								item.number = result.data.totayUser;
								break;
							case '可提现(' + uni.getStorageSync("system").currency_name + ')':
								item.number = result.data.surplus_income;
								break;

						}
					})
					this.dataStatistics.forEach((item) => {
						switch (item.text) {
							case '本月收益':
								item.number = result.data.monthIncome;
								break;
							case '今日收益':
								item.number = result.data.todayIncome;
								break;
							case '昨日收益':
								item.number = result.data.yesterdayIncome;
								break;

						}
					})
					this.orderStatistics.forEach((item) => {
						switch (item.text) {
							case '搭子订单':
								item.number = result.data.daziOrderNum;
								break;
							case '服务订单':
								item.number = result.data.serviceOrderNum;
								break;
							case '社群订单':
								item.number = result.data.communityOrderNum;
								break;

						}
					})
					this.withdrawalOverviewList.forEach((item) => {
						switch (item.text) {
							case '已提现(元)':
								item.number = result.data.totalWithdrawals;
								break;

							case '提现中(元)':
								item.number = result.data.withdrawingFunds;
								break;

						}
					})


					this.userList.forEach((item) => {
						switch (item.text) {
							case '累计用户':
								item.number = result.data.totayUser;
								break;
							case '本月新增':
								item.number = result.data.monthAddUserNum;
								break;
							case '今日新增':
								item.number = result.data.todayAddUserNum;
								break;

						}
					})

				} else {
					this.$sun.toast(result.message, 'none')
				}
			},

			closeBtn() {
				this.$at.uniDoFunc({
					key: 'submit',
					success: async () => {
						this.$at.lockKey('submit');
						// 登录 需要进行判断当前账号密码 和账号归属店铺及角色是否又选择
						if (!this.form.password) {
							this.$sun.toast("请输入新密码", 'none')
							this.$at.releaseKey('submit');
						} else {
							console.log(this.form)

							const saveOrUpdate = this.$api.editPwd
							const result = await this.$http.post({
								url: saveOrUpdate,
								data: {
									newPassword: this.form.password,
									oldPassword: this.promoterGetInfo.password,
									id: this.promoterGetInfo.id

								},
								headers: {
									'Authorization': this.userInfo.token
								}

							})
							if (result.code == 0) {



								this.$sun.toast(result.message, 'none')
								uni.removeStorageSync('loginInfo')
								this.$refs.phoneLogin.close()
								setTimeout(() => {
									this.$sun.navRe('/pagesB/index/promoterLogin')
								}, 500)



							} else {
								this.$sun.toast(result.message, 'none')
							}

							this.$at.releaseKey('submit');
						}
					}
				});
			},


			checkOrderFn(item) {
				console.log(item)
				if (item.text == '修改密码') {

					this.$refs.phoneLogin.show({
						anim: 'bottom',
						position: 'bottom',
						shadeClose: true, //false使用户不能点击其它关闭页面
						topclose: false,
						// shade:false,
						zIndex: 100000

					});

				} else if (item.text == '提现记录') {
					this.$sun.navGo('/pagesA/personalCenter/distributionRecords', {
						type: 3
					})
				} else if (item.text == '业绩记录') {
					this.$sun.navGo('/pagesB/index/performanceTracking', {
						id: this.promoterGetInfo.id
					})
				} else {
					this.$sun.navGo(item.url)
				}

			},

			// 日期获取
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				console.log(`${year}-${month}-${day}`)
				return `${year}-${month}-${day}`;

			},
			bindDateChange(e) {


				this.createTime = e.detail.value
				console.log(e.detail.value)

				this.date = e.target.value;
				/* 在上面声明变量，split是用来截取字段*/
				this.yeartime = this.date.split('-')[0];
				this.monthtime = this.date.split('-')[1];
				this.daytime = this.date.split('-')[2];


			},
			bindDateChange1(e) {


				this.createTime = e.detail.value
				console.log(e.detail.value)

				this.date1 = e.target.value;
				/* 在上面声明变量，split是用来截取字段*/
				this.yeartime1 = this.date1.split('-')[0];
				this.monthtime1 = this.date1.split('-')[1];
				this.daytime1 = this.date1.split('-')[2];


			},
			bindDateChange2(e) {


				this.createTime = e.detail.value
				console.log(e.detail.value)

				this.date2 = e.target.value;
				/* 在上面声明变量，split是用来截取字段*/
				this.yeartime2 = this.date2.split('-')[0];
				this.monthtime2 = this.date2.split('-')[1];
				this.daytime2 = this.date2.split('-')[2];


			},

		}
	}
</script>

<style lang="less">
	.phoneBtn {
		margin-top: 40rpx;

		height: 100rpx;
		border-radius: 130rpx;
		color: #fff;
		background: rgb(120, 93, 246);

	}

	.getPhone {
		height: 96rpx;
		border-radius: 124rpx;
		padding-left: 20rpx;
		background: #f5f5f9;
		position: relative;

		.ckPhone {
			height: 96rpx;
			line-height: 100rpx;
			width: 220rpx;
			background-color: transparent;
			color: #000;
		}

		.verificationCode {
			z-index: 999;
			position: absolute;
			right: 0;
			text-align: center;
			width: 170rpx;
			height: 65rpx;
			line-height: 65rpx;
			border-radius: 100rpx;
			font-size: 20rpx;
			background: #7D5CF7;
			color: #fff;
		}
	}

	.promotionCenter {
		padding: 20rpx;
		background: linear-gradient(180.00deg, rgb(61, 116, 255) 45.802%, rgb(128, 162, 253) 77.863%, rgba(255, 255, 255, 0) 100%);
		height: 380rpx;

		.promotionUser {
			padding: 24rpx;
			margin-top: 80rpx;
			// height: 360rpx;
			border-radius: 20rpx;
			background: rgb(255, 255, 255);

			.headimg {
				width: 48px;
				height: 48px;
				border-radius: 50%;
			}

			.withdrawalBtn {
				color: #fff;
				width: 130rpx;
				height: 60rpx;
				border-radius: 200rpx;

				background: rgb(30, 108, 235);
			}

			.icon {
				width: 45.12px;
				height: 15px;
			}
		}


	}

	.withdrawalOverview {
		border-radius: 20rpx;
		margin-top: 20rpx;
		background-color: #fff;
		padding: 20rpx;

		.line {
			width: 10rpx;
			height: 30rpx;
			border-radius: 106rpx;
			margin-right: 10rpx;
			background: #0084FF;
		}
	}

	.PerformanceStatistics {
		margin-top: 22rpx;

		.line {
			width: 10rpx;
			height: 30rpx;
			border-radius: 106rpx;
			margin-right: 10rpx;
			background: #0084FF;
		}

		border-radius: 20rpx;
		background: rgb(255, 255, 255);
		padding: 20rpx;

		.statisticsImg {
			margin-top: 7rpx;
			width: 96rpx;
			height: 96rpx;
		}
	}

	// 我的订单
	.myOrderCard {
		margin-top: 22rpx;

		.line {
			width: 10rpx;
			height: 30rpx;
			border-radius: 106rpx;
			margin-right: 10rpx;
			background: rgb(120, 93, 246);
		}

		border-radius: 20rpx;

		background: rgb(255, 255, 255);
		padding: 30rpx;

		.myOrder {
			padding-bottom: 25rpx;
			border-bottom: 2rpx solid rgb(237, 237, 237);
		}

		.avaterIcon {
			width: 85rpx;
			height: 85rpx;
			margin-bottom: 14rpx;
		}

		.infoBox {
			width: 25%;
			margin-bottom: 10rpx;
		}

		.rightContent {
			.authorizationTitle {
				color: #060606;
				// font-size: 28rpx;
				// font-weight: 600;
				margin-bottom: 20rpx;
			}

			.moreToolTitle {
				color: #666666;
				font-size: 28rpx;
				font-weight: 600;
				margin-bottom: 11rpx;
			}

			.authorizationText {
				color: #666;
				font-family: Inter;
				font-size: 24rpx;
			}
		}
	}
</style>